<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c"  %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>MIO美爱我氧气站</title>
		<link rel="icon" href="${pageContext.request.contextPath }/assets/images/mio.ico" type="image/x-icon">
        <link href="${pageContext.request.contextPath }/assets/css/main.css" rel="stylesheet" type="text/css" />
        <link href="${pageContext.request.contextPath }/assets/css/recommend.css" rel="stylesheet" type="text/css" />		
   	    <script type="text/javascript" src="${pageContext.request.contextPath }/assets/js/jquery-1.9.1.js"></script>
    	<script type="text/javascript" src="${pageContext.request.contextPath }/assets/videoplayer/flowplayer-3.2.8.min.js"></script>
    </head>
    <body>
    	<div id="bg">
	    	<!-- 头部jsp -->
			<jsp:include page="header.jsp" ></jsp:include>
			<div style="clear:both;"></div>
			<div class="recommend-img" style="background:url(${banner.fileFullPath }); background-size: 1000px;">
			</div>
		</div>
		<div id="bg">
			<div class="leftParter">
				<div class="leftParter-title">
				美美推荐
				</div>
			</div>
			<div class="rightParter">
				<div class="rightParter-title">
					Recommend
				</div>
				<div class="rightParter-content">
					<c:forEach var="item" items="${recommands }" varStatus="status">
					<div class="recommendItem">
						<div class="recommendImg">
							<a href="${pageContext.request.contextPath }/recommandDetail.do?recommendId=${item.id }">
								<img style="width:118px;height:76px;margin-top:16.5px;" src="${item.sImgUrl }" alt="${item.content }" border="0">
							</a>
						</div>
						<div class="recommendContent">
							<a href="${pageContext.request.contextPath }/recommandDetail.do?recommendId=${item.id }">${item.content }</a>
						</div>
					</div>
					</c:forEach>
					<div class="recommendItem">
						<div class="recommendImg">
							<a href="${pageContext.request.contextPath }/recommendDetail.jsp">
								<img style="width:118px;height:76px;margin-top:16.5px;" src="${pageContext.request.contextPath }/assets/images/product1.jpg" alt="「轻透薄服贴」是MIO面膜的特点！MIO天丝布膜研造的编织技术使面膜布薄且透，是一种长纤维的布膜，同时也抓水力也足够！" border="0">
							</a>
						</div>
						<div class="recommendContent">
							<a href="#">「轻透薄服贴」是MIO面膜的特点！MIO天丝布膜研造的编织技术使面膜布薄且透，是一种长纤维的布膜，同时也抓水力也足够！</a>
						</div>
					</div>
					
				</div>
				<ul class="page">
					<li>
						<c:if test='${pageStart==1}'>
							<a onclick="return false;" href="#">上一页</a>
						</c:if>
						<c:if test='${pageStart > 1}'>
							<a href="${pageContext.request.contextPath }/recommand.do?pageStart=${pageStart-1 }&pageCount=${pageCount }">上一页</a>							
						</c:if>
					</li>
					<c:if test="${pageStart + 2<=pageCount}">
						<c:forEach varStatus="i" begin="${pageStart }" end="${pageStart + 2}" step="1">
							<c:if test="${i.index == 1}">
							<li style="color:#F00; font-weight:bold;font-size:20px;">${pageStart }</li>
							</c:if>
							<c:if test="${i.index > 1}">
							<li>
								<a href="${pageContext.request.contextPath }/recommand.do?pageStart=${pageStart+i.index }&pageCount=${pageCount }">${pageStart+i.index }</a>
							</li>	
							</c:if>
						</c:forEach>
					</c:if>
					<c:if test="${pageStart + 2>pageCount}">
						<c:forEach varStatus="i" begin="${pageStart }" end="${pageCount }" step="1">
								<c:if test="${i.index == 1}">
								<li style="color:#F00; font-weight:bold;font-size:20px;">${pageStart }</li>
								</c:if>
								<c:if test="${i.index > 1}">
								<li>
									<a href="${pageContext.request.contextPath }/recommand.do?pageStart=${pageStart+i.index }&pageCount=${pageCount }">${pageStart+i.index }</a>
								</li>	
								</c:if>
						</c:forEach>
					</c:if>
					<li>
						<c:if test='${pageStart==pageCount}'>
							<a onclick="return false;" href="#">下一页</a>
						</c:if>
						<c:if test='${pageStart < pageCount}'>
							<a href="${pageContext.request.contextPath }/recommand.do?pageStart=${pageStart-1 }&pageCount=${pageCount }">下一页</a>							
						</c:if>
					</li>
				</ul>
			</div>
			<div style="clear:both;"></div>
		</div>
		<div id="bg"> 
			<!-- 尾部jsp -->
			<jsp:include page="footer.jsp"></jsp:include>
			
	    </div>
    </body>
</html>